<template>
	<!-- 打卡列表 -->
	<view class="page-content">
		<view class="page-top">
			<!-- 扫码 -->
			<view class="page-sm" @click="saoma">扫描二维码</view>
			<!--导航-->
			<view class="nav">
				<view class="nav-item" @click="handleActive(1)"
					:class="[active === 1 ? 'active' : active === 2 ? '' : active === 3 ? '' :'']">
					已扫码
				</view>
				<view class="nav-item" @click="handleActive(2)"
					:class="[active === 1 ? '' : active === 2 ? 'active' : active === 3 ? '' :'']">
					已签到
				</view>
				<view class="nav-item" @click="handleActive(3)"
					:class="[active === 1 ? '' : active === 2 ? '' : active === 3 ? 'active' :'']">
					已领取装备
				</view>
			</view>
		</view>
		<!--队伍信息-->
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--已扫码-->
			<template v-if="active=== 1">
				<template v-if="datalist1 && datalist1.length > 0 ">
					<block v-for="(item,index) in datalist1" :key="index">
						<view class="body-item-li">
							<view class="li-top">
								<view class="li-name">{{item.team_name}} <text class="li-name-txt">({{item.team_code}})</text></view>
								<view class="li-time">{{item.update_time}}</view>
							</view>
							<view class="li-address"><image class="li-address-icon" :src="address"></image>{{item.site}}</view>
						</view>
					</block>
					<!-- 上拉加载 -->
					<view class="det-con-more">
						<load-more :loadmore="load_more1"></load-more>
					</view>
				</template>
				<!--无数据-->
				<empty v-else no-full type="noData"></empty>
			</template>
			<!--已签到-->
			<template v-if="active=== 2">
				<template v-if="datalist2 && datalist2.length > 0 ">
					<block v-for="(item,index) in datalist2" :key="index">
						<view class="body-item-li2">
							<view class="li-top">
								<view class="li-name">{{item.team_name}} <text class="li-name-txt">({{item.team_code}})</text></view>
								<view class="li-time">{{item.update_time}}</view>
							</view>
						</view>
					</block>
					<!-- 上拉加载 -->
					<view class="det-con-more">
						<load-more :loadmore="load_more2"></load-more>
					</view>
				</template>
				<!--无数据-->
				<empty v-else no-full type="noData"></empty>
			</template>
			<!--已领取装备-->
			<template v-if="active=== 3">
				<template v-if="datalist3 && datalist3.length > 0 ">
					<block v-for="(item,index) in datalist3" :key="index">
						<view class="body-item-li2">
							<view class="li-top">
								<view class="li-name">{{item.team_name}} <text class="li-name-txt">({{item.team_code}})</text></view>
								<view class="li-time">{{item.update_time}}</view>
							</view>
						</view>
					</block>
					<!-- 上拉加载 -->
					<view class="det-con-more">
						<load-more :loadmore="load_more3"></load-more>
					</view>
				</template>
				<!--无数据-->
				<empty v-else no-full type="noData"></empty>
			</template>

		</scroll-view>
		<view class="example-body" v-show="isloadding==='loading'" :style="{opacity:isloadding==='loading'?1:0}">
			<uni-load-more iconType="snow" :status="isloadding" />
		</view>
	</view>
</template>

<script>
	import { mapMutations,mapState } from 'vuex'
	//接口
	import {
		getScanInfos, //扫码后获得的数据
		ScanClocks, //ScanClocks
		getScanUserAuths, //获取志愿者扫码权限
		getScanUserListDatas, //获取扫码志愿者已经有扫码的数据
	} from '@/common/api.js'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more2.vue";
	import loadMore from '@/components/uni-load-more/load-more.vue'
	export default {
		components: {
			loadMore,uniLoadMore
		},
		data() {
			return {
				noData: false,
				scrollTop:0,
				isloadding: '',
				address: '/static/user/icon-address.png',
				datalist1: [],
				datalist2: [],
				datalist3: [],
				load_more1: '', //下拉加载文字
				load_more2: '', //下拉加载文字
				load_more3: '', //下拉加载文字
				load_sta: false,

				selecl_num: '',
				active: 1,
				formData1: {
					game_id: 0,
					type: '',
					page :1,
					limit:10
				},
				formData2: {
					game_id: 0,
					type: '',
					page :1,
					limit:10
				},
				formData3: {
					game_id: 0,
					type: '',
					page :1,
					limit:10
				},
			}
		},
		onShow() {
			this.getAuths();
		},
		onLoad(option) {
			console.log(222, option)
		},
		methods: {
			//下拉加载
			loadmore() {
				console.log('下拉加载');
				let _self = this;
				_self.load_sta = true;
				if (_self.active === 1) {
					_self.formData1.page++;
					this.getdata1(_self.formData1);
				} else if (_self.active === 2) {
					_self.formData2.page++;
					this.getdata2(_self.formData2);
				} else if (_self.active === 3) {
					_self.formData3.page++;
					this.getdata3(_self.formData3);
				}
			},
			getAuths(){
				getScanUserAuths().then(res =>{
					console.log(1,res)
					if (res.code === 2000) {
						this.formData1.game_id  = res.data.game_id;
						this.formData2.game_id  = res.data.game_id;
						this.formData3.game_id  = res.data.game_id;
						this.formData1.type  = res.data.arr[0];
						this.formData2.type  = res.data.arr[1];
						this.formData3.type  = res.data.arr[2];
						this.getdata1();
						this.getdata2();
						this.getdata3();
					}
				})
			},
			handleActive(e) {
				let _self = this;
				_self.active = e;
				_self.load_sta = false;
				// if (_self.active === 1) {
				// 	_self.formData1.page = 1;
				// 	_self.getdata1(_self.formData1);
				// }
				// if (_self.active === 2) {
				// 	_self.formData2.page = 1;
				// 	_self.getdata2(_self.formData2);
				// }
				// if (_self.active === 3) {
				// 	_self.formData3.page = 1;
				// 	_self.getdata3(_self.formData3);
				// }
			},
			saoma() {
				let _self = this;
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						_self.isloadding = 'loading';
						getScanInfos({
							code: res.result
						}).then(res2 => {
							_self.isloadding = 'load';
							if (res2.code === 2000) {
								
								if(res2.data.type === 'clock'){
									uni.navigateTo({
										url: `/packageA/ewm/clock?code=${res2.data.code}`
									})
								}else if(res2.data.type === 'sign'){
									uni.navigateTo({
										url: `/packageA/ewm/sign?code=${res2.data.code}`
									})
								}else if(res2.data.type === 'equip'){
									uni.navigateTo({
										url: `/packageA/ewm/draw?code=${res2.data.code}`
									})
								}
								
							} else {
								uni.showToast({
									title: res2.msg,
									duration: 2000,
									icon: 'none'
								})
							}
						})
					}
				});
			},
			getdata1() {
				getScanUserListDatas(this.formData1).then(res => {
					console.log(1,res)
					if (res.code === 2000) {
						let datalist = res.data;
						if (datalist && datalist.length > 0) {
							if (this.load_sta) {
								if (datalist && datalist.length < 10) {
									this.load_more1 = '没有更多了';
									this.datalist1 = this.datalist1.concat(datalist);
								} else {
									this.load_more1 = '加载中...';
									this.datalist1 = this.datalist1.concat(datalist);
								}
							} else {
								if (datalist && datalist.length < 10) {
									this.load_more1 = '没有更多了'
									this.datalist1 = datalist;
								} else {
									this.load_more1 = '加载中...';
									this.datalist1 = this.datalist1.concat(datalist);
								}
							}
						}
					}
				})
			},
			getdata2() {
				getScanUserListDatas(this.formData2).then(res => {
					if (res.code === 2000) {
						let datalist = res.data;
						if (datalist && datalist.length > 0) {
							if (this.load_sta) {
								if (datalist && datalist.length < 10) {
									this.load_more2 = '没有更多了';
									this.datalist2 = this.datalist2.concat(datalist);
								} else {
									this.load_more1 = '加载中...';
									this.datalist2 = this.datalist2.concat(datalist);
								}
							} else {
								if (datalist && datalist.length < 10) {
									this.load_more2 = '没有更多了'
									this.datalist2 = datalist
								} else {
									this.load_more2 = '加载中...';
									this.datalist2 = this.datalist2.concat(datalist);
								}
							}
						}
					}
				})
			},
			getdata3() {
				getScanUserListDatas(this.formData3).then(res => {
					if (res.code === 2000) {
						let datalist = res.data;
						if (datalist && datalist.length > 0) {
							if (this.load_sta) {
								if (datalist && datalist.length < 10) {
									this.load_more3 = '没有更多了';
									this.datalist3 = this.datalist3.concat(datalist);
								} else {
									this.load_more3 = '加载中...';
									this.datalist3 = this.datalist3.concat(datalist);
								}
							} else {
								if (datalist && datalist.length < 10) {
									this.load_more3 = '没有更多了'
									this.datalist3 = datalist
								} else {
									this.load_more3 = '加载中...';
									this.datalist3 = this.datalist3.concat(datalist);
								}
							}
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
		height: 40rpx;
	}
	.example-body {
		position: fixed;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		left: calc(50% - 150rpx);
		top: calc(50% - 150rpx);
		width: 300rpx;
		height: 300rpx;
		background: rgba(0, 0, 0, 0);
	}

	.page-content {
		width: 100vw;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
		height: 100%;

		.page-top {
			display: flex;
			flex-direction: column;
			height: 276rpx;
			overflow: hidden;

			.page-sm {
				font-size: 32rpx;
				line-height: 86rpx;
				color: #fff;
				text-align: center;
				margin: 60rpx 30rpx 30rpx 30rpx;
				height: 86rpx;
				background: #02BB6F;
				box-shadow: 0px 7px 7px rgba(2, 187, 111, 0.1);
				border-radius: 43rpx;
			}

			.nav {
				height: 100rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				text-align: center;
				font-size: 28rpx;
				color: #d2d2d2;

				.nav-item {
					flex: 1;
					position: relative;

					&::after {
						content: '';
						width: 0;
						height: 8rpx;
						background-color: #02BB6F;
						position: absolute;
						left: 50%;
						bottom: -16rpx;
						transform: translateX(-50%);
						transition: .3s;
					}

					&.active {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;

						&::after {
							width: 40rpx;
						}
					}
				}
			}
		}

		.page-body {
			display: flex;
			flex-direction: column;
			width: 100vw;
			height: calc(100% - 276rpx);
			.body-item-li{
				padding: 30rpx;
				border-radius: 10rpx;
				background: #fff;
				margin:0 30rpx 20rpx 30rpx;
				display: flex;
				border-radius: 10rpx;
				flex-direction: column;
				.li-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					.li-name{
						width: calc(100% - 280rpx);
						font-size: 36rpx;
						font-weight: 400;
						color: #2B2B2B;
						.li-name-txt{
							font-size: 28rpx;
							color: #999;
						}
					}
					.li-time{
						text-align: right;
						width: 260rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #A7A7A7;
					}
				}
				.li-address{
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: 300;
					color: #5D5858;
					.li-address-icon{
						width: 24rpx;
						height: 28rpx;
						margin-right: 14rpx;
					}
				}
			}
			.body-item-li2{
				padding: 30rpx;
				border-radius: 10rpx;
				background: #fff;
				margin:0 30rpx 20rpx 30rpx;
				display: flex;
				border-radius: 10rpx;
				flex-direction: column;
				.li-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.li-name{
						width: calc(100% - 280rpx);
						font-size: 36rpx;
						font-weight: 400;
						color: #2B2B2B;
						.li-name-txt{
							font-size: 28rpx;
							color: #999;
						}
					}
					.li-time{
						text-align: right;
						width: 260rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #A7A7A7;
					}
				}
			}
		}
	}
</style>
